<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>我的</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #ffffff;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
        }

        .myCalc {
            width: 6.9rem;
            height: 4.34rem;
            margin-left: calc((100% - 6.9rem) / 2);
            background: url("../../image/bgaawasdx.png") no-repeat center;
            background-size: 100% 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            margin-top: 0.3rem;
        }

        .myCalc p,
        span {
            text-align: center;
        }

        .showmymax {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-bottom: 0.1rem;
        }

        .showmymax>p {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .showmymax>p>span:first-of-type {
            color: rgba(24, 24, 24, 0.6);
        }

        .showRangDetail {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            width: 6.6rem;
            height: 0.96rem;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            position: relative;
        }

        .calculateAverage {
            position: absolute;
            right: -0.3rem;
            bottom: 0;
            color: #fff;
            font-size: 0.26rem;
        }

        .showRang {
            width: 6.1rem;
            height: 0.1rem;
            background-color: rgba(0, 0, 0, 0.1);
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
        }

        .calculateText {
            font-size: 0.26rem;
            color: rgba(0, 0, 0, 0.6);
        }

        .showRang p {
            width: 0;
            height: 0.1rem;
            background-color: #fff;
            border-radius: 0 0.08rem 0.08rem 0;
        }

        .presentCalculate {
            font-weight: 600;
            font-size: 0.35rem;
            margin: 0.1rem 0 0 0;
        }

        .myMaxPower {
            font-weight: 600;
            font-size: 0.35rem;
            margin: 0.1rem 0 0 0;
        }

        .mycalaNumber {
            position: absolute;
            left: -1%;
            top: -0.1rem;
            height: 0.24rem;
            width: auto;
            border: 1px solid #fff;
            border-radius: 0.05rem;
            padding: 0.05rem;
            color: #fff;
            font-size: 0.2rem;
            line-height: 0.24rem;
            text-align: center;
        }

        .mycalaNumber::before {
            border-top: 0.1rem solid #fff;
            border-right: 0.1rem solid transparent;
            border-left: 0.1rem solid transparent;
            content: "";
            position: absolute;
            width: 0;
            left: 45%;
            top: 100%;
        }

        .mycalaNumber::after {
            border-top: 0.1rem solid #fed51c;
            border-right: 0.1rem solid transparent;
            border-left: 0.1rem solid transparent;
            content: "";
            position: absolute;
            width: 0;
            left: 45%;
            top: 90%;
        }

        .growthRate {
            width: 100%;
            font-size: 0.26rem;
            color: rgba(0, 0, 0, 0.6);
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: flex-start;
            padding: 0 0.2rem 0 0.4rem;
            box-sizing: border-box;
        }

        .growthRate>span:first-of-type {
            background-color: #fff;
            color: rgba(0, 0, 0, 0.2);
            padding: 0.03rem 0.07rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.1rem;
            margin-right: 0.05rem;
            font-size: 0.24rem;
        }

        .growthRate p {
            flex: 1;
            text-align: left;
        }

        .explain {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
            padding-bottom: 0.4rem;
        }

        .explaintext {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-top: 0.2rem;
            height: 1.43rem;
            box-sizing: border-box;
        }

        .explaintext b {
            font-size: 0.29rem;
            position: relative;
            margin-bottom: 0.3rem;
        }

        .explaintext b::after,
        .explaintext b::before {
            content: '';
            position: absolute;
            top: 52%;
            background: #494949;
            width: 0.65rem;
            height: 2px;
        }

        .explaintext b::after {
            right: -50%;
        }

        .explaintext b::before {
            left: -50%;
        }

        .explaintext p {
            color: #909090;
            font-size: 0.24rem;
        }

        .imgBg {
            margin-top: 0.29rem;
            width: 6.68rem;
            height: 5.75rem;
            background: url("../../image/bitbgx.png") no-repeat center;
            background-size: 100% 100%;
            position: relative;
        }

        .imgBg p {
            width: 2.1rem;
            border-radius: 0.64rem;
            position: absolute;
            right: 14%;
            color: #fff;
            font-size: 0.2rem;
        }

        .imgBg p:first-of-type {
            top: 27%;
        }

        .imgBg p:nth-of-type(2) {
            top: 43%;
        }

        .imgBg p:nth-of-type(3) {
            top: 60%;
        }

        .imgBg p:last-of-type {
            bottom: 18%;
        }

        .imgBg span {
            width: 0.64rem;
            height: 0.64rem;
            border-radius: 0.64rem;
            position: absolute;
            right: 2%;
            background-color: #fff;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
        }

        .imgBg span img {
            width: 0.64rem;
            height: 0.64rem;
            border-radius: 0.64rem;
        }

        .imgBg span:first-of-type {
            top: 23%;
            color: #eed350;
        }

        .imgBg span:nth-of-type(2) {
            top: 40%;
            color: #f5ba43;
        }

        .imgBg span:nth-of-type(3) {
            top: 56%;
            color: #f59948;
        }

        .imgBg span:last-of-type {
            bottom: 15.5%;
            color: #dc7a33;
        }

        .imgBg b {
            padding: 0 0.05rem;
            font-size: 0.18rem;
            position: absolute;
            right: -4%;
            top: 23%;
            background-color: #fbeccb;
            color: #d07430;
            border-radius: 0.05rem;
            z-index: 10;
            display: none;
        }

        .imgBg b::after {
            border-top: 0.1rem solid #fbeccb;
            border-right: 0.1rem solid transparent;
            border-bottom: 0.1rem solid transparent;
            content: "";
            position: absolute;
            width: 0;
            left: 0;
            top: 94%;
        }

        #vipimgx {
            position: absolute;
            right: 1.5%;
            top: 16%;
        }

        .parsentLevel {
            width: 6.89rem;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 0.39rem;
            color: rgba(89, 89, 89, 1);
        }

        .parsentLevel b {
            width: 6.8rem;
            box-sizing: border-box;
            font-weight: normal;
            font-size: 0.24rem;
        }

        #goRent {
            border: none;
            outline: none;
            font-size: 0.28rem;
            margin-top: 0.2rem;
            width: 6.2rem;
            height: 0.8rem;
            background: linear-gradient(0deg, rgba(255, 247, 209, 1), rgba(255, 255, 255, 1));
            border-radius: 0.1rem;
            color: rgba(38, 38, 38, 1);
            font-family: PingFang SC;
            font-weight: 500;
        }
    </style>
</head>

<body>
    <div class="myCalc">
        <div class="showmymax">
            <p>
                <span>
                    我的当前算龄
                </span>
                <span class="presentCalculate">
                    0.00 TD
                </span>
            </p>
            <p>
                <span>
                    历史最高算龄
                </span>
                <span class="myMaxPower">
                    0.00 TD
                </span>
            </p>
        </div>
        <div class="showRangDetail">
            <div class="showRang">
                <p>

                </p>
            </div>
            <sapn class="mycalaNumber">
                0TD
            </sapn>
            <span class="calculateAverage">
                --
            </span>
        </div>
        <div class="growthRate">
            <span>
                进阶
            </span>
            <p>人均增长速度 <span class="myStatusNum">0</span>TD, 您的当前增长速度<span class="meanStausNum">0</span>TD</p>
            <p class="notQualified" style="display:none;">
                当前你的算龄未达到标准算龄,暂未获得双挖矿机的资格
            </p>
        </div>
        <button id="goRent">
            加速成长
        </button>
    </div>
    <div class="explain">
        <div class="explaintext">
            <b>
                收益区间排名
            </b>
            <p>
                您持有算龄越大，排名区间就越靠前，挖矿收益就越多
            </p>
        </div>
        <div class="imgBg">
            <p>
                矿霸<i class="firstTop"></i>
            </p>
            <p>
                矿主<i class="secrendTop"></i>
            </p>
            <p>
                矿工<i class="threeTop"></i>
            </p>
            <p>
                小矿工<i class="frouthTop"></i>
            </p>
            <span>
                P1
            </span>
            <span>
                P2
            </span>
            <span>
                P3
            </span>
            <span>
                P4
            </span>
            <b>
                我在这儿
            </b>
            <img src="../../image/vipimgx.png" id="vipimgx" alt="" style="width:0.74rem;height:0.7rem;">
        </div>
        <div class="parsentLevel">
            <b class="yesPassing">
                您目前排名在 <span>P4区间(算龄低于第80%位数)，日增长速度比人均增长速度少98TD。快去下单加速成长，成长越快，等级越高，权益更大。</span>
            </b>
            <b class="noPassing" style="display:none;">
                您目前算龄未达标, 未获得双挖矿机资格, 没有进入排名区间。快去下单加速成长, 成长越快, 等级越高, 权益更大
            </b>
        </div>
        <div style="width: 100%;padding: 0.3rem 0;background-color: #ffffff;margin-top: 0.29rem;">
            <img src="../../image/bgyear.png"
                style="width:6.9rem;height: 3.8rem;margin-left: calc((100% - 6.9rem) / 2)">
        </div>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var newMypower = api.pageParam.isNewmypower;
        function checKQualified(calcuNumber, meanNuber, myaddNumber, boundary) {
            var caluPercentage = 0; //我的算龄于目标算龄的百分比
            var statusLevel = 4; //所在等级
            var levelText = ""; //所在等级文字
            var checkReg = /([0-9]+\.[0-9]{2})[0-9]*/
            if (calcuNumber < 1000) {
                $(".notQualified").show();
                $(".growthRate>p:first-of-type").hide();
                $(".calculateAverage").text("入门算龄").css({
                    "right": "0.1rem"
                });
                caluPercentage = String(app.accDiv(calcuNumber, 1000)).replace(checkReg, "$1");
                $(".yesPassing").hide();
                $(".noPassing").show();
                $(".mycalaNumber").text("1000TD");
                $(".mycalaNumber").css({
                    "left": "88%",
                    "width": "12%"
                });
                var addNumberMin = 0;
                var timeOutMin = app.accMul(caluPercentage, 100);
                var timer = setInterval(function () {
                    if (timeOutMin > 0) {
                        addNumberMin++;
                        $(".showRang p").css("width", addNumberMin + "%");
                        if (addNumberMin == timeOutMin) {
                            clearInterval(timer);
                        }
                    }
                }, 5);
            } else {
                $(".notQualified").hide();
                $(".myStatusNum").text(meanNuber);
                $(".meanStausNum").text(myaddNumber)
                $(".growthRate>p:first-of-type").show();
                $(".yesPassing").show();
                $(".noPassing").hide();
                $(".calculateAverage").text(meanNuber + "TD");
                caluPercentage = String(app.accDiv(myaddNumber, meanNuber)).replace(checkReg, "$1");
                if (calcuNumber < boundary.td_p80) {
                    $(".imgBg span:last-of-type").html("<img src=" + account.avatar + ">");
                    $(".imgBg>b").css("top", "69%");
                    statusLevel = 4;
                    levelText = "低于第80%位数"
                } else if (calcuNumber < boundary.td_p94) {
                    $(".imgBg span:nth-of-type(3)").html("<img src=" + account.avatar + ">");
                    $(".imgBg>b").css("top", "53%");
                    statusLevel = 3;
                    levelText = "高于第80%位数,小于第94%位数"
                } else if (calcuNumber < boundary.td_p99) {
                    $(".imgBg span:nth-of-type(2)").html("<img src=" + account.avatar + ">");
                    $(".imgBg>b").css("top", "36%");
                    statusLevel = 2;
                    levelText = "高于第94%位数,小于第99%位数"
                } else {
                    $(".imgBg span:first-of-type").html("<img src=" + account.avatar + ">");
                    $(".imgBg>b").css("top", "19%");
                    statusLevel = 1;
                    levelText = "高于第99位数"
                };
                $(".imgBg>b").show();
                if (myaddNumber - meanNuber >= 0) {
                    $(".yesPassing span").text('P' + statusLevel + '区间(算龄' + levelText + ')，日增长速度比人均增长速度高' + (parseInt(myaddNumber - meanNuber) == 0 ? 1 : parseInt(myaddNumber - meanNuber)) + 'TD。坚持成长，等级越高，收益越大');
                } else {
                    $(".yesPassing span").text('P' + statusLevel + '区间(算龄' + levelText + ')，日增长速度比人均增长速度少' + parseInt(meanNuber - myaddNumber) + 'TD。快去下单加速成长，成长越快，等级越高，权益更大。');
                }
                var addNumber = 0;
                var timeOut = app.accMul(caluPercentage, 100);
                if (timeOut > 100) {
                    timeOut = 80;
                    $(".calculateAverage").css("right", "40%");
                } else {
                    $(".calculateAverage").css("right", 0);
                }
                var timer = setInterval(function () {
                    addNumber++;
                    $(".showRang p").css("width", addNumber + "%");
                    $(".mycalaNumber").css("left", addNumber - 8 + "%");
                    $(".mycalaNumber").text(addNumber * 5 + "TD");
                    if (addNumber == timeOut) {
                        $(".mycalaNumber").text(myaddNumber + "TD");
                        clearInterval(timer);
                    }
                }, 5);
            }
        }
        function getMyCalc(account) {
            app.ajaxPro({
                url: "member/td",
                values: {
                    token: account.token
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    function isIntrger(params) {
                        return Math.floor(params)
                    }
                    var forceNumber = Number(ret.data.powerTimeNow) == 0 ? "0.00" : ret.data.powerTimeNow;
                    $(".presentCalculate").text(forceNumber + " TD");
                    $(".myMaxPower").text((Number(ret.data.powerTimeYesterdayMax) > Number(ret.data.powerTimeMax) ? ret.data.powerTimeYesterdayMax : ret.data.powerTimeMax) + " TD");
                    var meanNumber = Number(ret.data.averagePower); //平均增长速度
                    var myaddNumber = Number(ret.data.userPower); //我的增长
                    var boundary = {
                        td_p80: ret.data.threeLevel,
                        td_p94: ret.data.twoLevel,
                        td_p99: ret.data.oneLevel
                    };
                    $(".firstTop").text("(大于" + ret.data.oneLevel + ")");
                    $(".secrendTop").text('(' + ret.data.twoLevel + "—" + ret.data.oneLevel + ")");
                    $(".threeTop").text('(' + ret.data.threeLevel + "—" + ret.data.twoLevel + ")");
                    $(".frouthTop").text("(1000—" + ret.data.threeLevel + ")");
                    checKQualified(Number(ret.data.powerTimeNow), meanNumber, myaddNumber, boundary)
                }
            })
        }
        getMyCalc(account);
        $("#goRent").click(function () {
            var pageValue = api.pageParam;
            app.navigationBarClickLeft(pageValue.pageName);
            if (newMypower) {
                app.trigger("go_newMypower");
            } else {
                app.trigger("go_machineList");
            }
            app.setTabBarAttr(1);
        });
        app.headerMap(function (ret) {
            app.openWin({
                name: "equitysecurityDetail_headerwin",
                url: app.hd + "common/headerwin.html",
                pageParam: {
                    subpage: "https://mp.weixin.qq.com/s/23bzTSaIwGyDg1WaAKYb5Q",
                    name: "browser",
                    type: "remote",
                    isremote: "true",
                    title: "权益说明"
                }
            });
            // var param = {
            //     name: "equitysecurityDetail",
            //     url: "https://mp.weixin.qq.com/s/23bzTSaIwGyDg1WaAKYb5Q",
            //     title: "权益说明"
            // }
            // app.setNavBarAttrPrimary(param);
        });
    }
</script>

</html>